<template>
    <div class="title">
        <slot name="titleRight" />
        <span>{{$t(title)}}</span>
        <slot name="titleSelect" />
        <bfe-button style="margin-left: 30px;" type="text" :icon="`arrow-${btnDirection}`" @click="changeBtnDir" v-if="hasExpand">
            {{ $t(buttonName[btnDirection]) }}
        </bfe-button>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            default: '',
            type: String
        },
        hasExpand: {
            default: false,
            type: Boolean
        },
        btnFlag: {
            default: 'up',
            type: String
        }
    },
    data() {
        return {
            buttonName: {
                up: 'common.down',
                down: 'common.up'
            },
            btnDirection: 'up',
        }
    },
    mounted() {
        this.btnDirection = this.btnFlag
    },
    methods: {
        changeBtnDir(){
            this.btnDirection = this.btnDirection === 'up' ? 'down' : 'up'
            this.$emit('changeShow', this.btnDirection)
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    width: 100%;
    padding: 10px 0;
    float: left;
    >span{
        display: block;
        border-left: 2px solid #d21f3e;
        height: 16px;
        line-height: 14px;
        padding: 0 0 0 10px;
        font-size: 15px;
        font-weight: bold;
        color: #1f2c3d;
        float: left;
    }
}
</style>